<template>
  <div class="basic-table">
    <a-table
      :id="id"
      v-bind="$attrs"
      :rowKey="rowKey"
      :loading="loading"
      :row-selection="rowSelection"
      :pagination="false"
      :scroll="_scroll"
    >
      <template #[slotName]="slotProps" v-for="(slot, slotName) in $slots">
        <slot :name="slotName" v-bind="slotProps" />
      </template>
    </a-table>
    <a-pagination
      @change="handlePaginationChange"
      show-size-changer
      :defaultPageSize="10"
      :pageSizeOptions="['10', '20', '50', '100']"
      :show-total="(total:number)=>`共${total}条`"
      :total="total"
    />
  </div>
</template>

<script lang="ts" setup name="BasicTable">
import { computed, watch, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import Sortable from 'sortablejs'
import { loading, total, paginate, selectedRowKeys, getTableData, resetUseTableState } from '../hooks/useTable'
import { type SelectedRowKeys, tableData } from '../hooks/useTable'
import apis from '@/apis'
import { message } from 'ant-design-vue'
console.log('tableData: ', tableData)
const {
  collectManage: { collectOrder }
} = apis
type Props = {
  isRowSelection?: boolean // 是否显示多选
  scroll?: { x?: number; y?: number }
  rowKey?: string
  id?: string
}
const props = withDefaults(defineProps<Props>(), {
  isRowSelection: true,
  rowKey: 'id'
})
const { isRowSelection, scroll, rowKey, id } = props
console.log('id: ', id)
const _scroll = { ...scroll, scrollToFirstRowOnChange: true }

// 路由变化重置 tableState
const route = useRoute()
watch(
  () => route.fullPath,
  () => {
    resetUseTableState()
  }
)

// 多选
const rowSelection = computed(() => {
  if (isRowSelection) {
    return {
      selectedRowKeys: selectedRowKeys.value,
      onChange: onSelectChange
    }
  } else {
    return null
  }
})
const onSelectChange = (selectRowKeys: SelectedRowKeys) => {
  // console.log('selectedRowKeys: ', selectRowKeys)
  selectedRowKeys.value = selectRowKeys
}

// 分页
/**
 * 分页改变事件
 */
const handlePaginationChange = (size: number, limit: number) => {
  paginate.value.limit = limit
  paginate.value.offset = (size - 1) * limit
  getTableData()
}
//调用排序接口
const sortFunc = (item: any) => {
  collectOrder({
    ...item
  }).then(() => {
    message.success('排序成功')
    getTableData()
  })
}
//初始化表格拖动
const initSortable = () => {
  const el = document.querySelector(`${id} tbody`) as unknown as HTMLElement
  if (!el) return false
  new Sortable(el, {
    handle: '.ant-table-row',
    animation: 150,
    ghostClass: 'blue-background-class',
    forceFallback: true,
    sort: true,
    // async
    onEnd(item) {
      console.log({ item })
      if (item.newIndex === item.oldIndex) return
      const startIndex = (item.oldIndex as number) - 1
      const endIndex = (item.newIndex as number) - 1
      const { id } = tableData.value[startIndex]
      const { order } = tableData.value[endIndex]
      sortFunc({ order, id })
    }
  })
}
nextTick(() => {
  if (!id) return false
  initSortable()
})
</script>

<style lang="less" scoped>
.basic-table {
  :deep(.ant-pagination) {
    margin: 0;
  }
}
</style>
